<template>
  <pt-container>

    <pt-main>
      <pt-com-grid :pageSizes="[20,1000,10000]" :ptQuery="ptQuery" ref="grid" url="/login/demo/PtDemoTable"
                   visualScroll>
        <div class="pt-query-container" slot="query">
          <el-input @keyup.enter.native="$refs.grid.doQuery()" class="filter-item" placeholder="名称"
                    style="width: 200px;"
                    v-model="ptQuery.query.anyQuery">
          </el-input>
          <pt-btn icon="fa fa-question-circle-o" style="float: right;font-size: 30px">
            <div slot="content" style="font-size: large">
              <li>调试:通过url找到vue界面,根据pt-com-grid的url找到后端Controller,增删改查采用约定命名规范,具体参考vue的api文档</li>
              <li>使用visualScroll,虚拟滚动列表,可以做到加载无限数据,界面不卡,普通列表一般500条就有卡顿</li>
              <li>新增在后端设置初值</li>
              <li>行内编辑,使用了普通下拉,列表下拉,日期,数字校验等等</li>
              <li>表头排序(sql的order by)</li>
              <li>列表样式,铺满窗口,分页在下方</li>
              <li>导出excel,打印,高级查询等通用功能</li>
              <li>编辑新增删除,采用单条更新,不刷新列表</li>
              <li>使用pt-form编辑及校验</li>
              <li>使用pt-dialog,可拖动,双击title可全屏</li>
              <li>校验规则 $r的使用</li>
              <li>文件上传,2行代码实现全部功能</li>
            </div>
          </pt-btn>
          <pt-button @click="$refs.grid.doQuery()" class="filter-item" icon="search" keyType="query" ref="q"
                     type="primary">搜索
          </pt-button>
          <pt-button @click="$refs.grid.doEdit('')" class="filter-item" icon="edit" keyType="add" ref="a"
                     type="primary">新增
          </pt-button>
          <pt-button @click="editByForm()" class="filter-item" icon="edit" keyType="add" ref="a"
                     type="primary">Form新增
          </pt-button>
          <pt-button @click="addManyData" class="filter-item" icon="edit" keyType="add" ref="a"
                     type="primary" v-loading="isLoading">增加1000条数据
          </pt-button>
          <pt-button @click="$refs.grid.doRemoveAll()" class="filter-item" keyType="del" ref="d" type="danger">删除
          </pt-button>
        </div>
        <pt-table-column align="center" fixed="right" label="操作" width="100px">
          <template slot-scope="scope">
            <PtGridEditBtn :row="scope.row" gridRef="grid"></PtGridEditBtn>
            <!--icon可用elment ui的或者fontawesome的图标库,http://fontawesome.dashgame.com/-->
            <pt-btn @click.stop="fileUpload(scope.row)" hint="上传" icon="fa fa-upload" v-if="!scope.row.isEdit"></pt-btn>
            <pt-btn @click.stop="editByForm(scope.row)" hint="form编辑" icon="el-icon-edit-outline"
                    v-if="!scope.row.isEdit"></pt-btn>
          </template>
        </pt-table-column>
        <pt-table-column :inputFormat="(d,row)=>row.dropCodeStr" :inputProp="{ field:'DEMO_DROP'}" :rules="$r(1)"
                         align="center"
                         input="PtDrop" label="普通下拉" prop="dropCode" sortable txtVal="dropCodeStr" width="100px">
        </pt-table-column>
        <pt-table-column :input="require('./UserTableDrop').default" :inputFormat="(d,row)=>row.dropGridStr"
                         :rules="$r(0,0,50)" align="center"
                         idVal="dropGridId" label="列表下拉" prop="dropGridId" sortable
                         txtVal="dropGridStr" width="auto">
        </pt-table-column>
        <pt-table-column :inputProp="$time" :rules="$r(0)" align="center" input="el-date-picker" label="时间"
                         prop="dateTime"
                         sortable width="200px">
        </pt-table-column>
        <pt-table-column :rules="$r(1,3,10)" align="center" label="文本(3-10字符)" prop="name"
                         sortable width="auto">
        </pt-table-column>
        <pt-table-column :rules="$r(0,0,999999,'number',2)" align="center" input="PtNum" label="数字(2位小数)" prop="sorter"
                         sortable width="auto">
        </pt-table-column>
      </pt-com-grid>
    </pt-main>
    <!--文件上传,只需要一个引入和一个函数,即实现上传下载-->
    <PtFileUpload multiple ref="fileUpload"></PtFileUpload>

    <Ptdemotableform ref="ptdemotableform"></Ptdemotableform>
  </pt-container>
</template>
<script>

  import Ptdemotableform from "./PtDemoTableForm";

  export default {
    name: 'ptdemotable',
    components: {Ptdemotableform},
    data() {
      return {
        ptQuery: this.$query(),//new一个PtQuery
        isLoading: false,
      }
    },

    mounted() {

    },
    methods: {
      addManyData() {
        let nowNum = this.$refs.grid.ptResult.total
        this.isLoading = true
        this.$http.post('/login/demo/PtDemoTable/addManyData?startNum=' + nowNum).then(response => {
          const data = response.data
          this.$message({
            type: data.code == '-1' ? 'error' : 'success',
            message: data.message
          })
          this.isLoading = false
          this.$refs.grid.doQuery()
        }).catch(() => {
          this.isLoading = false
        })
      },
      fileUpload(row) {
        this.$refs.fileUpload.open("ptdemotable", row.tableId, true)
      },
      editByForm(row) {
        //  ptcomgrid的this
        this.$refs.ptdemotableform.show(row, this.$refs.grid)
      }
    },
    computed: {}
  }
</script>
